<template>
    <el-date-picker type="datetime" :model-value="combinedDateTime" @update:model-value="handleChange"
        format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" :clearable="true" placeholder="选择日期时间" />


    <div>
        {{ startTime }} {{ endTime }}
    </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
    startTime: {
        type: String,
        default: '', // e.g. "2025-01-02"
    },
    endTime: {
        type: String,
        default: '', // e.g. "15:15:15"
    }
})

const emit = defineEmits(['update:startTime', 'update:endTime'])

// 组合完整的 datetime 字符串
const combinedDateTime = computed(() => {
    if (props.startTime && props.endTime) {
        return `${props.startTime} ${props.endTime}`
    }
    return ''
})

// 监听用户选择后的变更
const handleChange = (val) => {
    if (val) {
        const [datePart, timePart] = val.split(' ')
        emit('update:startTime', datePart || '')
        emit('update:endTime', timePart || '')
    } else {
        emit('update:startTime', '')
        emit('update:endTime', '')
    }
}
</script>

<style scoped>
.el-date-picker {
    width: 100%;
}
</style>